<template>
  <div class="page adaofu-index">
    <div class="container" :style="theme" v-if="!showLoading">
      <div class="statistic">
        <div class="shop-name" :style="coinBg" @click="onShopNameClick">
          <p><span class="name">{{playerStoreInfo.data.player.nickname || playerStoreInfo.account.nickname}}</span><span>的香氛店</span></p>
        </div>
        <div class="flower-count">
          <i :style="flower"></i>
          <span>{{playerStoreInfo.data.player.flowers || playerStoreInfo.account.flowers}}朵</span>
        </div>
        <div class="entrance" v-if="!isOtherPlayer">
          <div class="entrance-item" @click="onQiandaoClick">
            <i :style="qiandao"></i>
            <div>签到</div>
          </div>
          <div class="entrance-item" @click="onFriendClick">
            <i :style="friend"></i>
            <div>合伙人</div>
          </div>
        </div>
      </div>
      <div class="shop-operate">
        <div class="like" @click="onShopLikeClick">
          <i class="icon-like" :class="{ active: isShopLike }"></i>
          <span>点赞</span>
        </div>
        <div class="share" @click="onShareClick">
          <i :style="share"></i>
          <span>招募合伙人</span>
          <div class="act"></div>
        </div>
      </div>
      <!-- 背景音乐操控 -->
      <div class="music-operate">
        <i class="icon-music" @click="onMusicBtnClick" :class="{ active: isMusicOn }"></i>
      </div>
      <!-- 经营攻略 -->
      <div class="help" @click="onHelpClick">
        <i class="icon-help"></i>
        <span>经营攻略</span>
      </div>
      <div class="menu">
        <div class="menu-container">
          <div class="menu-item" @click="onMenuItemClick(1)" v-if="!isOtherPlayer">
            <i :style="menu1"></i>
            <span>排行榜</span>
          </div>
          <div class="menu-item" @click="onMenuItemClick(2)" v-if="!isOtherPlayer">
            <i :style="menu2"></i>
            <span>装饰</span>
          </div>
          <div class="menu-item" @click="onMenuItemClick(3)">
            <i :style="menu3"></i>
            <span>留言区</span>
          </div>
          <div class="menu-item" @click="onMenuItemClick(4)" v-if="!isOtherPlayer">
            <i :style="menu4"></i>
            <span>奖品兑换</span>
          </div>
          <div class="menu-item" @click="onMenuItemClick(5)" v-if="!isOtherPlayer">
            <i :style="menu5"></i>
            <span>我的货架</span>
          </div>
          <div class="menu-item" @click="onMenuItemClick(6)" v-if="isOtherPlayer">
            <i :style="menu5"></i>
            <span>我的店铺</span>
          </div>
        </div>
      </div>
      <!-- 捣乱的猴子 -->
      <div class="monkey" v-if="showMonkey && !showDecSection" @click="onMonkeyClick">
        <div v-if="isOtherPlayer">
          <div class="monkey-text" :style="monkeyText"></div>
          <div class="monkey-image" :style="monkeyImage"></div>
        </div>
        <div v-else class="no-text">
          <button open-type="share">
            <div class="monkey-image" :style="monkeyImage"></div>
          </button>
        </div>
      </div>
      <!-- 随机顾客 -->
      <div class="customer" v-if="showCustomer && !showDecSection" @click="onCustomerClick">
        <div class="customer-flower">
          <template v-if="showCustomerFlower">
            <i></i>
            <span>+{{customerFlower}}</span>
          </template>
        </div>
        <img :src="customerImage" mode="widthFix" :style="customerStyle"/>
      </div>
      <!-- 装饰 -->
      <div class="decorate" v-if="showDecSection">
        <div class="decorate-menu">
          <div @click="onDecMenuClick(1)">
            <i :style="currentDecMenu === 1 ? decMenu1c : decMenu1"></i>
          </div>
          <div @click="onDecMenuClick(2)">
            <i :style="currentDecMenu === 2 ? decMenu2c : decMenu2"></i>
          </div>
          <div @click="onDecMenuClick(3)">
            <i :style="currentDecMenu === 3 ? decMenu3c : decMenu3"></i>
          </div>
        </div>
        <div class="decorate-detail">
          <div class="decorate-detail-item item1" v-if="currentDecMenu === 1">
            <div class="item-box">
              <div v-for="(item, i) in 10" :key="i" @click="onDecDetailItemClick1(i)"></div>
            </div>
          </div>
          <div class="decorate-detail-item item2" v-if="currentDecMenu === 2">
            <div class="item-box">
              <div v-for="(item, i) in 5" :key="i" @click="onDecDetailItemClick2(i)"></div>
            </div>
          </div>
          <div class="decorate-detail-item item3" v-if="currentDecMenu === 3">
            <div class="item-box">
              <div @click="onDecDetailItemClick3(0)"></div>
              <div @click="onDecDetailItemClick3(1)"></div>
              <div @click="onDecDetailItemClick3(2)"></div>
              <div @click="onDecDetailItemClick3(3)" v-if="decItemCount3 > 3"></div>
              <div class="empty" v-else></div>
              <div @click="onDecDetailItemClick3(4)" v-if="decItemCount3 > 4"></div>
              <div class="empty" v-else></div>
              <div @click="onDecDetailItemClick3(5)" v-if="decItemCount3 > 5"></div>
              <div class="empty" v-else></div>
            </div>
          </div>
        </div>
        <div class="decorate-close" @click="onDecClose">完成</div>
      </div>
      <!-- 物件容纳器 -->
      <div @tap="onDrawAreaTap">
        <movable-area class="draw-container"
          v-for="(item, i) in drawSource" :key="i">
          <!-- 柜子 -->
          <movable-view
            v-if="item.imageId.length === 9"
            class="draw-item"
            direction="all"
            :animation="false"
            damping="150"
            :x="item.x"
            :y="item.y"
            :data-id="i"
            :disabled="!showDecSection"
            @change="onDrawChange">
            <img
              mode="widthFix"
              :src="item.image"
              :style="drawItemFixedStyle"
              :class="{ focus: showDecSection && i === drawSource.length - 1 }"
              />
          </movable-view>
          <!-- 人物和普通物件-->
          <movable-view
            v-else
            class="draw-item"
            direction="all"
            :animation="false"
            damping="150"
            :x="item.x"
            :y="item.y"
            :data-id="i"
            :disabled="!showDecSection"
            @change="onDrawChange">
            <img
              mode="widthFix"
              :src="item.image"
              :style="{ width: item.width }"
              :class="{ focus: showDecSection && i === drawSource.length - 1 }"
              />
            <div class="draw-close" @click="onDrawCloseClick(i)"
              v-if="showDecSection && i === drawSource.length - 1"></div>
          </movable-view>
        </movable-area>
      </div>
      <div class="words">
        <!-- 弹幕 -->
        <div class="words-show" v-if="showWordsShow && !wordsAnimationFinish">
          <div class="words-show-item" v-for="(item, i) in storeCommentList" :key="i">
            <div class="item-inner">
              <img :src="item.data.fromheadimgurl"/>
              <p>{{item.comment}}</p>
            </div>
          </div>
        </div>
        <!-- 弹幕列表面板-->
        <div class="words-section" v-if="showWordsSection">
          <div class="words-section-title">
            <div class="left">
              <div class="count">弹幕({{storeCommentList.length}})</div>
              <div class="btn" @click="onWriteWordsClick">写弹幕</div>
            </div>
            <div class="right">
              <div class="toggle" :class="{ 'toggle-on': showWordsShow }" @click="onWordsToggleClick"></div>
              <div class="close" @click="onWordsSectionClose"></div>
            </div>
          </div>
          <div class="words-section-list">
            <word-list
              v-for="(item, i) in storeCommentList"
              :key="i"
              :list="item"
              :likeList="storeCommentLike"
              :canDel="!isOtherPlayer"
              @onDel="onDelComment"></word-list>
          </div>
        </div>
        <!-- 弹幕输入 -->
        <div class="words-input" v-if="showWordsInput">
          <div class="input-area">
            <textarea placeholder="请输入弹幕，不超过60字" maxlength="60" v-model="wordsText"></textarea>
          </div>
          <div class="btn">
            <div class="btn-inner">
              <div class="cancel-btn" @click="onWordsInputCancel">取消</div>
              <div class="send-btn" @click="onWordsSend">发送</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <qiandao-dialog
      :show.sync="showQiandaoDialog"
      :seriateTime="seriateTime"
      :signRecordList.sync="signRecordList"></qiandao-dialog>
    <alert1-dialog :show.sync="showAlert1Dialog" @onClick="onAlert1DialogBtnClick"></alert1-dialog>
    <alert2-dialog :show.sync="showAlert2Dialog"></alert2-dialog>
    <alert4-dialog :show.sync="showAlert4Dialog" :parentId="parentId"></alert4-dialog>
    <alert5-dialog :show.sync="showAlert5Dialog" :parentId="parentId"></alert5-dialog>
    <alert7-dialog :show.sync="showAlert7Dialog"></alert7-dialog>
    <alert8-dialog :show.sync="showAlert8Dialog"></alert8-dialog>
    <alert9-dialog :show.sync="showAlert9Dialog" :incomes="incomes"></alert9-dialog>
    <alert12-dialog :show.sync="showAlert12Dialog"></alert12-dialog>
    <alert13-dialog :show.sync="showAlert13Dialog"></alert13-dialog>
    <alert16-dialog :show.sync="showAlert16Dialog"></alert16-dialog>
    <alert17-dialog :show.sync="showAlert17Dialog"></alert17-dialog> -->
    <alert18-dialog :show.sync="showAlert18Dialog"></alert18-dialog>
    <!-- <newer-dialog :show.sync="showNewerDialog" :userName="playerStoreInfo.data.player.nickname"></newer-dialog> -->
    <m-loading :show.sync="showLoading"></m-loading>
  </div>
</template>

<script>
import { sourceDomain, apiDomain } from '@/utils/constant'
import mixins from 'comp/mixins'
import { getStorage, setStorage } from '@/utils/wx'
import QiandaoDialog from 'comp/qiandao-dialog'
import WordList from 'comp/word-list'
import Alert1Dialog from 'comp/alert1-dialog'
import Alert2Dialog from 'comp/alert2-dialog'
import Alert4Dialog from 'comp/alert4-dialog'
import Alert5Dialog from 'comp/alert5-dialog'
import Alert7Dialog from 'comp/alert7-dialog'
import Alert8Dialog from 'comp/alert8-dialog'
import Alert9Dialog from 'comp/alert9-dialog'
import Alert12Dialog from 'comp/alert12-dialog'
import Alert13Dialog from 'comp/alert13-dialog'
import Alert16Dialog from 'comp/alert16-dialog'
import Alert17Dialog from 'comp/alert17-dialog'
import Alert18Dialog from 'comp/alert18-dialog'
import NewerDialog from 'comp/newer-dialog'
import MLoading from 'comp/m-loading'

const customerFlower = {
  cust1: 1, // 学生
  cust2: 2, // 白领
  cust3: 5, // 超模
  cust4: 2, // 白领
  cust5: 4, // 外商
  cust6: 4, // 外商
  cust7: 3, // 空姐
  cust8: 1, // 学生
}

export default {
  mixins: [mixins],
  components: {
    QiandaoDialog,
    WordList,
    Alert1Dialog,
    Alert2Dialog,
    Alert4Dialog,
    Alert5Dialog,
    Alert7Dialog,
    Alert8Dialog,
    Alert9Dialog,
    Alert12Dialog,
    Alert13Dialog,
    Alert16Dialog,
    Alert17Dialog,
    Alert18Dialog,
    NewerDialog,
    MLoading
  },
  data () {
    return {
      icons: {
        menu1: `${require('static/images/index/menu1.png')}`,
        menu2: `${require('static/images/index/menu2.png')}`,
        menu3: `${require('static/images/index/menu3.png')}`,
        menu4: `${require('static/images/index/menu4.png')}`,
        menu5: `${require('static/images/index/menu5.png')}`,
        coinBg: `${require('static/images/index/coin-bg.png')}`,
        flower: `${require('static/images/index/flower.png')}`,
        qiandao: `${require('static/images/index/qiandao.png')}`,
        friend: `${require('static/images/index/friend.png')}`,
        share: `${require('static/images/index/share.png')}`,
        theme1: `${sourceDomain}/theme1.png?v=1.3`,
        theme2: `${sourceDomain}/theme2.png?v=1.3`,
        theme3: `${sourceDomain}/theme3.png?v=1.3`,
        theme4: `${sourceDomain}/theme4.png?v=1.3`,
        theme5: `${sourceDomain}/theme5.png?v=1.3`,
        monkeyText: `${sourceDomain}/monkey-text.png?v=1.3`,
        monkeyImage: `${sourceDomain}/monkey-image.png?v=1.3`,
        decMenu1: `${require('static/images/index/dec-menu1.png')}`,
        decMenu2: `${require('static/images/index/dec-menu2.png')}`,
        decMenu3: `${require('static/images/index/dec-menu3.png')}`,
        decMenu1c: `${require('static/images/index/dec-menu1-c.png')}`,
        decMenu2c: `${require('static/images/index/dec-menu2-c.png')}`,
        decMenu3c: `${require('static/images/index/dec-menu3-c.png')}`,
      },
      themeId: null, // 初始化不显示背景，由接口获取后再设初始值
      themeImage: '', // 背景图
      showMonkey: false,
      currentDecMenu: 1,
      showDecSection: false,
      drawSource: [],
      drawSourceTemp: [],
      showWordsShow: false,
      wordsAnimationFinish: true,
      showWordsSection: false,
      showWordsInput: false,
      openId: '',
      playerId: '',
      isOtherPlayer: false,
      parentId: '',
      playerStoreInfo: {
        account: {},
        data: {
          player: {}
        }
      },
      storeCommentList: [],
      storeCommentLike: [],
      wordsText: '',
      showQiandaoDialog: false,
      // 连续签到次数
      seriateTime: 0,
      // 连续签到次数最高纪录
      seriateMaxTime: 0,
      storeId: '',
      signRecordList: {},
      signSuccess: false,
      // 装饰图的长宽比例，用于计算用户点击是否在图片区域之内
      decImageRatio: {
        p1: 264 / 496,
        p2: 229 / 522,
        p3: 239 / 489,
        p4: 128 / 513,
        p5: 122 / 513,
        p6: 107 / 509,
        p7: 212 / 592,
        p8: 155 / 587,
        p9: 168 / 584,
        p10: 165 / 590,
        zs1: 249 / 180,
        zs2: 135 / 163,
        zs3: 172 / 219,
        zs4: 201 / 341,
        zs5: 126 / 242,
        zs6: 252 / 389,
        theme1_s1: 744 / 666,
        theme2_s1: 723 / 621,
        theme3_s1: 586 / 582,
        theme4_s1: 657 / 460,
        theme5_s1: 514 / 327,
      },
      // 装饰图宽度
      decImageWidth: {
        p1: 264,
        p2: 229,
        p3: 239,
        p4: 128,
        p5: 122,
        p6: 107,
        p7: 212,
        p8: 155,
        p9: 168,
        p10: 165,
        zs1: 249 / 2,
        zs2: 135 / 2,
        zs3: 172 / 2,
        zs4: 201 / 2,
        zs5: 126 / 2,
        zs6: 252 / 2,
        theme1_s1: 744,
        theme2_s1: 723,
        theme3_s1: 586,
        theme4_s1: 657,
        theme5_s1: 514,
      },
      customerImageWidth: {
        cust1: 217 / 1.5,
        cust2: 179 / 1.5,
        cust3: 224 / 1.5,
        cust4: 249 / 1.5,
        cust5: 192 / 1.5,
        cust6: 221 / 1.5,
        cust7: 246 / 1.5,
        cust8: 268 / 1.5
      },
      isShopLike: false,
      isMusicOn: true,
      showAlert1Dialog: false,
      showAlert2Dialog: false,
      showAlert4Dialog: false,
      showAlert5Dialog: false,
      showAlert7Dialog: false,
      showAlert8Dialog: false,
      showAlert9Dialog: false,
      showAlert12Dialog: false,
      showAlert13Dialog: false,
      showAlert16Dialog: false,
      showAlert17Dialog: false,
      showAlert17DialogAlias: false,
      showAlert18Dialog: true,
      incomes: 0,
      showCustomer: false,
      showCustomerFlower: false,
      customerId: null,
      showNewerDialog: false,
      randomTimer: null,
      showLoading: false,
      windowWidth: null,
      setTimoutWhenFetchFinish: true,
      timeoutTimer1: null,
      timeoutTimer2: null,
      timeoutTimer3: null,
      timeoutTimer4: null,
      timeoutTimer5: null,
      timeoutTimer6: null,
      playerIdFromUrl: '',
      newChildren: false
    }
  },
  computed: {
    menu1 () {
      return `background-image: url(${this.icons.menu1});`
    },
    menu2 () {
      return `background-image: url(${this.icons.menu2});`
    },
    menu3 () {
      return `background-image: url(${this.icons.menu3});`
    },
    menu4 () {
      return `background-image: url(${this.icons.menu4});`
    },
    menu5 () {
      return `background-image: url(${this.icons.menu5});`
    },
    coinBg () {
      return `background-image: url(${this.icons.coinBg});`
    },
    flower () {
      return `background-image: url(${this.icons.flower});`
    },
    qiandao () {
      return `background-image: url(${this.icons.qiandao});`
    },
    friend () {
      return `background-image: url(${this.icons.friend});`
    },
    share () {
      return `background-image: url(${this.icons.share});`
    },
    theme () {
      return `background-image: url(${this.themeImage});`
    },
    // 饰品的数量
    decItemCount3 () {
      let count = 3
      // 连续签到次数纪录为3、5、7天，分别解锁一个饰品
      if (this.seriateMaxTime === '3') {
        count = 4
      } else if (this.seriateMaxTime === '5') {
        count = 5
      } else if (this.seriateMaxTime === '7') {
        count = 6
      }
      return count
    },
    drawItemFixedStyle () {
      let width = 0
      if (this.themeId === 1) {
        width = 744
      }
      if (this.themeId === 2) {
        width = 723
      }
      if (this.themeId === 3) {
        width = 586
      }
      if (this.themeId === 4) {
        width = 657
      }
      if (this.themeId === 5) {
        width = 514
      }
      return `width: ${width}rpx;`
    },
    drawItemFixedWidth () {
      let width = 0
      if (this.themeId === 1) {
        width = 744
      }
      if (this.themeId === 2) {
        width = 723
      }
      if (this.themeId === 3) {
        width = 586
      }
      if (this.themeId === 4) {
        width = 657
      }
      if (this.themeId === 5) {
        width = 514
      }
      return width
    },
    drawFixedPositionInit () {
      // 根据屏幕分辨率定位桌子的位置
      let x = 0
      let y = 0
      let single = []
      if (this.themeId > 0) {
        if (this.themeId === 1) {
          x = this.getPx(6)
          y = this.getPx(288)
        }
        if (this.themeId === 2) {
          x = this.getPx(27)
          y = this.getPx(413)
        }
        if (this.themeId === 3) {
          x = this.getPx(164)
          y = this.getPx(421)
        }
        if (this.themeId === 4) {
          x = this.getPx(92)
          y = this.getPx(574)
        }
        if (this.themeId === 5) {
          x = this.getPx(127)
          y = this.getPx(655)
        }
        single = [{
          x,
          y,
          image: `${sourceDomain}/theme${this.themeId}_s1.png?v=1.3`,
          imageId: `theme${this.themeId}_s1`,
          width: `${this.drawItemFixedWidth}rpx`,
          widthPx: this.getPx(this.drawItemFixedWidth),
          radio: this.decImageRatio[`theme${this.themeId}_s1`],
          windowWidth: this.windowWidth
        }]
      }
      return single
    },
    monkeyText () {
      return `background-image: url(${this.icons.monkeyText});`
    },
    monkeyImage () {
      return `background-image: url(${this.icons.monkeyImage});`
    },
    customerImage () {
      if (this.customerId) {
        return `${sourceDomain}/cust${this.customerId}.png?v=1.3`
      }
    },
    customerFlower () {
      if (this.customerId) {
        const cust = `cust${this.customerId}`
        return `${customerFlower[cust]}`
      }
    },
    customerStyle () {
      if (this.customerId) {
        const i = `cust${this.customerId}`
        return `width: ${this.customerImageWidth[i]}rpx;`
      }
    },
    decMenu1 () {
      return `background-image: url(${this.icons.decMenu1});`
    },
    decMenu2 () {
      return `background-image: url(${this.icons.decMenu2});`
    },
    decMenu3 () {
      return `background-image: url(${this.icons.decMenu3});`
    },
    decMenu1c () {
      return `background-image: url(${this.icons.decMenu1c});`
    },
    decMenu2c () {
      return `background-image: url(${this.icons.decMenu2c});`
    },
    decMenu3c () {
      return `background-image: url(${this.icons.decMenu3c});`
    },
  },
  onLoad () {
    this.showLoading = true
  },
  async onShow () {
    this.resetDataPrivate()
    this.initDevicePx()

    // 检查用户授权
    if (this.showLoading) {
      const hasUserInfo = await this.checkUserInfo()
      if (hasUserInfo) {
        this.initPage()
      } else {
        this.timeoutTimer1 = setTimeout(() => {
          this.setTimoutWhenFetchFinish = false
          this.initPage()
          this.timeoutTimer1 && clearTimeout(this.timeoutTimer1)
        }, 2500)
      }
    } else {
      this.initPage()
    }
  },
  mounted () {
    this.showAlert17DialogAlias = true
  },
  methods: {
    async initPage () {
      const authResult = await this.checkAuth()
      if (authResult) {
        this.openId = await this.getOpenId()
        await this.getPlayerId()
        await this.getPlayerStoreInfo()
        // 解锁货架，如有
        this.unLockItems()

        this.checkMusic()

        // 上级
        try {
          let parentId = this.$root.$mp.page.options.parentId
          const scene = decodeURIComponent(this.$root.$mp.query.scene)
          if (scene) {
            // 获取小程序码中的parentId
            parentId = scene.split('parentId=')[1]
            this.playerIdFromUrl = (scene.split('playerId=')[1]).split('&')[0]
          }
          if (parentId) {
            this.parentId = parentId
            setStorage('parentId', parentId)
          }
        } catch (err) {
        }

        try {
          // 是否显示弹幕
          const showWordsShow = await getStorage('showWordsShow')
          if (showWordsShow === false) { // 排除undefined的情况
            this.showWordsShow = false
          } else {
            this.showWordsShow = true
            await this.getStoreComment(true)
          }
        } catch (err) {
          // undefined
          this.showWordsShow = true
          await this.getStoreComment(true)
        }

        try {
          // 是否显示新手指引，只显示一次
          const showNewerDialog = await getStorage('showNewerDialog')
          if (showNewerDialog === false) {
            this.showNewerDialog = false
          } else {
            this.showNewerDialog = true
            setStorage('showNewerDialog', false)
          }
        } catch (err) {
          this.showNewerDialog = true
          setStorage('showNewerDialog', false)
        }
      }

      // 检查小程序更新
      this.checkUpdate()
    },
    /**
     * reset data
     */
    resetDataPrivate () {
      clearInterval(this.randomTimer)
      this.currentDecMenu = 1
      this.showDecSection = false
      this.showWordsShow = false
      this.wordsAnimationFinish = true
      this.showWordsSection = false
      this.showWordsInput = false
      this.wordsText = ''
      this.isOtherPlayer = false
      this.playerStoreInfo = {
        account: {},
        data: {
          player: {}
        }
      }
      this.showQiandaoDialog = false
      this.signSuccess = false
      this.showAlert1Dialog = false
      this.showAlert2Dialog = false
      this.showAlert4Dialog = false
      this.showAlert5Dialog = false
      this.showAlert7Dialog = false
      this.showAlert8Dialog = false
      this.showAlert9Dialog = false
      this.showAlert12Dialog = false
      this.showAlert13Dialog = false
      this.showAlert16Dialog = false
      this.showAlert17Dialog = false
      this.showAlert17DialogAlias = false
      this.incomes = 0
      this.showCustomer = false
      this.showNewerDialog = false
      this.timeoutTimer1 = null
      this.timeoutTimer2 = null
      this.timeoutTimer3 = null
      this.timeoutTimer4 = null
      this.timeoutTimer5 = null
      this.timeoutTimer6 = null
      this.playerIdFromUrl = ''
      this.newChildren = false
    },
    /**
     * 签到入口，显示签到面板
     */
    async onQiandaoClick () {
      const ret = await this.$store.dispatch('getSignRecord')
      this.signRecordList = ret.data.list
      this.seriateTime = ret.account.sigin_seriate_times
      this.showQiandaoDialog = true
    },
    /**
     * 合伙人店铺
     */
    onFriendClick () {
      wx.navigateTo({
        url: '/pages/friend/main'
      })
    },
    onShopNameClick () {
      if (this.isOtherPlayer) {
        wx.navigateTo({
          url: `/pages/new/main?playerId=${this.playerId}`
        })
      } else {
        wx.navigateTo({
          url: `/pages/new/main`
        })
      }
    },
    /**
     * 点击主菜单
     */
    onMenuItemClick (i) {
      let bgMusic = wx.createInnerAudioContext()
      bgMusic.autoplay = true
      bgMusic.loop = false
      bgMusic.src = 'http://files.ldtui.com/adf/click.mp3'
      bgMusic.volume = 0.2
      if (i === 1) {
        wx.navigateTo({
          url: '/pages/rank/main'
        })
      }
      if (i === 2) {
        this.showDecSection = true
      }
      if (i === 3) {
        this.showWordsSection = true
        this.getStoreComment(false)
      }
      if (i === 4) {
        wx.navigateTo({
          url: '/pages/exchange/main'
        })
      }
      if (i === 5) {
        wx.navigateTo({
          url: '/pages/onsale/main'
        })
      }
      if (i === 6) {
        wx.reLaunch({
          url: `/pages/index/main?parentId=${this.parentId}`
        })
      }
    },
    /**
     * 点击装饰面板菜单
     */
    onDecMenuClick (i) {
      this.currentDecMenu = i
    },
    /**
     * 选中店主
     */
    onDecDetailItemClick1 (i) {
      const single = {
        x: 245 / 2,
        y: 245 / 2,
        image: `${sourceDomain}/dec-p${i + 1}.png?v=1.3`,
        imageId: `p${i + 1}`,
        width: `${this.decImageWidth[`p${i + 1}`]}rpx`,
        widthPx: this.getPx(this.decImageWidth[`p${i + 1}`]),
        radio: this.decImageRatio[`p${i + 1}`],
        windowWidth: this.windowWidth
      }
      this.drawSource = this.drawSource.concat(single)
      this.drawSourceTemp = this.drawSourceTemp.concat(single)
    },
    /**
     * 选中背景图
     */
    onDecDetailItemClick2 (i) {
      const theme = `theme${i + 1}`
      this.themeId = i + 1
      this.themeImage = this.icons[theme]
      const drawSource = this.drawSource
      for (let j = 0; j < drawSource.length; j++) {
        if (drawSource[j].imageId.length === 9) {
          // 更新柜子图片
          this.drawSource[j] = this.drawFixedPositionInit[0]
          break
        }
      }
    },
    /**
     * 选中饰品
     */
    onDecDetailItemClick3 (i) {
      const single = {
        x: 245 / 2,
        y: 245 / 2,
        image: `${sourceDomain}/dec-zs${i + 1}.png?v=1.3`,
        imageId: `zs${i + 1}`,
        width: `${this.decImageWidth[`zs${i + 1}`]}rpx`,
        widthPx: this.getPx(this.decImageWidth[`zs${i + 1}`]),
        radio: this.decImageRatio[`zs${i + 1}`],
        windowWidth: this.windowWidth
      }
      this.drawSource = this.drawSource.concat(single)
      this.drawSourceTemp = this.drawSourceTemp.concat(single)
    },
    /**
     * 关闭装饰面板
     */
    onDecClose () {
      this.showDecSection = false
      this.drawSource = this.drawSourceTemp

      // 提交的数据
      const data = {
        themeId: this.themeId,
        themeImage: this.themeImage,
        source: this.drawSource,
        windowWidth: this.windowWidth
      }
      this.$store.dispatch('storeDressup', {
        parent_id: this.parentId,
        data: JSON.stringify(data)
      })
      // 首次开店装修完成才提示
      // if (!this.playerStoreInfo.account.has_store && ret.data) {
      //   this.showAlert2Dialog = true
      // }
    },
    /**
     * 移动饰品，记录位置
     */
    onDrawChange (e) {
      const i = e.target.dataset.id
      // 先缓存位置
      this.drawSourceTemp[i].x = e.target.x
      this.drawSourceTemp[i].y = e.target.y
    },
    /**
     * 删除饰品
     */
    onDrawCloseClick (i) {
      this.drawSource.splice(i, 1)
      this.drawSourceTemp.splice(i, 1)
    },
    /**
     * 监听绘画区域的点击事件
     */
    onDrawAreaTap (e) {
      if (this.showDecSection) {
        const curPos = {
          x: e.x,
          y: e.y
        }
        const source = this.drawSourceTemp
        const x0 = this.getPx(150)
        const x1 = this.getPx(this.drawItemFixedWidth)
        // 倒序遍历，获取倒序第一个点中的图片
        for (let i = source.length - 1; i >= 0; i--) {
          const x = source[i].x
          const y = source[i].y
          const id = source[i].imageId
          const radio = this.decImageRatio[id]
          let height = 0
          let xx = 0
          if (id.length === 9) {
            height = x1 / radio
            xx = x + x1
          } else {
            height = x0 / radio
            xx = x + x0
          }
          const yy = y + height
          if (curPos.x > x && curPos.x < xx) {
            if (curPos.y > y && curPos.y < yy) {
              // 将击中的项移到数组最后，模拟击中
              const arr = this.drawSource
              const t = arr[i]
              const narr = arr.concat(t)
              narr.splice(i, 1)
              this.drawSourceTemp = narr
              this.drawSource = narr
              break
            }
          }
        }
      }
    },
    initDevicePx () {
      try {
        const res = wx.getSystemInfoSync().windowWidth
        this.windowWidth = res
      } catch (e) {
        return false
      }
    },
    /**
     * 获取屏幕自适应宽度
     * @param w 物理像素值
     */
    getPx (w) {
      let real = 0
      const windowWidth = this.windowWidth
      if (windowWidth) {
        real = Math.floor(windowWidth / 750 * w)
      }
      return real
    },
    /**
     * 写弹幕
     */
    onWriteWordsClick () {
      this.wordsText = ''
      this.showWordsInput = true
    },
    /**
     * 关闭留言面板
     */
    onWordsSectionClose () {
      this.showWordsSection = false
      this.showWordsInput = false
    },
    /**
     * 发送留言
     */
    async onWordsSend () {
      const ret = await this.$store.dispatch('doStoreComment', {
        store_id: this.playerStoreInfo.data.store.store_id,
        comment: this.wordsText
      })
      if (ret.data) {
        wx.showToast({
          title: '发送成功'
        })
        // 关闭留言输入面板
        this.showWordsInput = false
        // 重新请求留言列表
        this.getStoreComment(true)
      }
    },
    /**
     * 关闭写弹幕
     */
    onWordsInputCancel () {
      this.showWordsInput = false
    },
    onWordsToggleClick () {
      this.showWordsShow = !this.showWordsShow
      setStorage('showWordsShow', this.showWordsShow)

      if (this.showWordsShow) {
        this.wordsAnimationFinish = false
        this.timeoutTimer2 = setTimeout(() => {
          this.wordsAnimationFinish = true
          this.timeoutTimer2 && clearTimeout(this.timeoutTimer2)
        }, 12000)
      }
    },
    /**
     * 获取playerId，如果连接存在playerId，则优先用链接的参数
     */
    async getPlayerId () {
      // 注意要从page中获取，不能从query获取，因为返回时query没有更新，坑！！！
      const playerIdFromUrl = this.$root.$mp.page.options.playerId || this.playerIdFromUrl
      const ret = await this.$store.dispatch('getPlayerInfo')
      if (playerIdFromUrl) {
        if (playerIdFromUrl === ret.account.player_id) {
          // 如果是自己
          this.isOtherPlayer = false
        } else {
          this.isOtherPlayer = true
        }
        this.playerId = playerIdFromUrl
      } else {
        this.playerId = ret.account.player_id
      }
      this.newChildren = ret.data.newchildren
      // 广告
      if (!this.isOtherPlayer && this.showAlert17DialogAlias) {
        this.showAlert17Dialog = true
      }
    },
    /**
     * 获取玩家的个人信息和店铺信息
     */
    async getPlayerStoreInfo () {
      const ret = await this.$store.dispatch('getPlayerStoreInfo', {
        player_id: this.playerId
      })
      if (ret) {
        // 请求完数据，隐藏loading界面
        if (this.setTimoutWhenFetchFinish) {
          this.timeoutTimer3 = setTimeout(() => {
            this.showLoading = false
            this.timeoutTimer3 && clearTimeout(this.timeoutTimer3)
          }, 2500)
        } else {
          this.showLoading = false
        }

        this.playerStoreInfo = ret
        const store = ret.data.store || {}
        const drawData = store.data || {}
        this.showMonkey = store.monkey_appear
        this.storeId = store.store_id
        // 更新店铺装修数据
        this.themeId = drawData.themeId || 1
        this.themeImage = drawData.themeImage || this.icons.theme1
        this.drawSource = drawData.source || this.drawFixedPositionInit
        this.drawSourceTemp = drawData.source || this.drawFixedPositionInit
        this.seriateTime = ret.account && ret.account.sigin_seriate_times
        this.seriateMaxTime = ret.account && ret.account.sigin_seriate_max_times
        this.isShopLike = ret.data.islike

        if (this.isOtherPlayer) {
          // 动态设置标题
          const title = ret.data.player.nickname
          if (title) {
            wx.setNavigationBarTitle({
              title: `${title}的香氛店`
            })
          }
        } else {
          if (this.playerStoreInfo.account.has_store) {
            if (this.showMonkey) {
              this.initMonkey()
            }
            if (this.playerStoreInfo.data.upitems > 0) {
              // 已经上架商品，显示顾客。顾客和猴子可同时存在。
              this.randomCustomer()
            } else {
              if (this.newChildren) {
                // 拥有新合伙人
                this.showAlert13Dialog = true
              } else {
                // 无上架商品，弹出补货提示
                this.showAlert12Dialog = true
              }
            }
          } else {
            this.showAlert1Dialog = true
          }
        }
      }
    },
    /**
     * 随机出现的顾客
     */
    randomCustomer () {
      this.timeoutTimer4 = setTimeout(() => {
        const r1 = Math.floor(Math.random() * 7 + 1)
        this.customerId = r1
        this.showCustomer = true
        this.randomTimer = setInterval(() => {
          const r2 = Math.floor(Math.random() * 7 + 1)
          this.customerId = r2
        }, 1000 * 16)
        this.timeoutTimer4 && clearTimeout(this.timeoutTimer4)
      }, 3000)
    },
    /**
     * 点击顾客，显示花花，2s后顾客和鲜花都消失
     */
    onCustomerClick () {
      this.showCustomerFlower = true
      this.timeoutTimer5 = setTimeout(() => {
        this.showCustomerFlower = false
        this.showCustomer = false
        clearInterval(this.randomTimer)
        this.timeoutTimer5 && clearTimeout(this.timeoutTimer5)
        this.randomCustomer()
      }, 1500)
    },
    /**
     * 初始化显示猴子弹窗，只显示一次
     */
    initMonkey () {
      try {
        const hasShowMonkeyDialog = getStorage('hasShowMonkeyDialog')
        this.showAlert7Dialog = !hasShowMonkeyDialog
      } catch (err) {
        this.showAlert7Dialog = true
      }
      setStorage('hasShowMonkeyDialog', true)
    },
    /**
     * 获取店铺评论
     * @augments init 是否初始化弹幕动画，前提是this.showWordsShow为true
     */
    async getStoreComment (init = false) {
      const ret = await this.$store.dispatch('getStoreComment', {
        store_id: this.playerStoreInfo.data.store ? this.playerStoreInfo.data.store.store_id : '',
        page: 1,
        rows: 30
      })
      this.storeCommentList = ret.data.list
      this.storeCommentLike = ret.data.like

      if (init) {
        this.wordsAnimationFinish = false
        this.timeoutTimer6 = setTimeout(() => {
          this.wordsAnimationFinish = true
          this.timeoutTimer6 && clearTimeout(this.timeoutTimer6)
        }, 12000)
      }
    },
    /**
     * 删除评论弹窗
     */
    onDelComment (id) {
      wx.showModal({
        title: '提示',
        content: '确认删除？',
        confirmText: '确认',
        cancelText: '取消',
        success: (res) => {
          if (res.confirm) {
            this.doDelComment(id)
          }
        }
      })
    },
    /**
     * 执行删除评论
     */
    async doDelComment (id) {
      const ret = await this.$store.dispatch('delStoreComment', {
        comment_id: id
      })
      if (ret.data) {
        await this.getStoreComment()
        wx.showToast({
          title: '删除成功'
        })
      }
    },
    /**
     * 点击驱赶猴子，自己不能驱赶自己店铺的猴子
     */
    async onMonkeyClick () {
      if (this.isOtherPlayer) {
        const ret = await this.$store.dispatch('driveMonkey', {
          store_id: this.storeId
        })
        if (ret.data) {
          this.showMonkey = false
          let tips = ''
          if (ret.data.flowers > 0) {
            this.showAlert8Dialog = true
          } else {
            tips = '当天互动次数已满，不能再收获鲜花了'
            wx.showModal({
              title: '提示',
              content: tips,
              confirmText: '确认',
              showCancel: false,
              success: (res) => {
                if (res.confirm) {}
              }
            })
          }
        }
      }
    },
    /**
     * 分享，招募合伙人
     */
    onShareClick () {
      const url = encodeURIComponent(`${apiDomain}/api/poster/recommend?player_id=${this.playerStoreInfo.account.player_id}`)
      wx.navigateTo({
        url: `/pages/poster/main?posterUrl=${url}`
      })
    },
    /**
     * 店铺点赞
     */
    async onShopLikeClick () {
      if (!this.isShopLike) {
        const ret = await this.$store.dispatch('doPlayerLike', {
          player_id: this.playerId
        })
        if (ret.data) {
          this.isShopLike = true
        }
      }
    },
    /**
     * 解锁货架
     */
    async unLockItems () {
      const isUnLock = this.$root.$mp.page.options.isUnLock
      if (isUnLock === '1') {
        const ret = await this.$store.dispatch('unLockItems', {
          store_id: this.storeId
        })
        if (ret.data) {
          if (this.playerStoreInfo.account.has_store) {
            this.showAlert4Dialog = true
          } else {
            this.showAlert5Dialog = true
          }
        }
      }
    },
    /**
     * 背景音乐开关
     */
    onMusicBtnClick () {
      if (this.isMusicOn) {
        this.isMusicOn = false
        this.$bgmusic.pause()
      } else {
        this.isMusicOn = true
        this.$bgmusic.play()
      }
    },
    /**
     * 检查是否开了背景音乐开关，如果开了，则play一下
     */
    checkMusic () {
      if (this.isMusicOn) {
        this.$bgmusic.play()
      }
    },
    /**
     * 新户欢迎弹窗，点确定后弹窗装饰面板
     */
    onAlert1DialogBtnClick () {
      this.showDecSection = true
    },
    /**
     * 经营攻略
     */
    onHelpClick () {
      this.showAlert16Dialog = true
    }
  },
  onShareAppMessage () {
    return {
      title: '快来帮我驱赶捣乱的猴子吧！',
      path: `/pages/index/main?playerId=${this.playerId}&parentId=${this.parentId || this.playerId}`
    }
  }
}
</script>

<style lang="less" scoped>
.adaofu-index {
  .container {
    position: relative;
    min-height: 100%;
    min-height: 100vh;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .statistic {
    z-index: 8;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -585rpx;
    padding: 21rpx 0 0 35rpx;
    .shop-name {
      width: 204rpx;
      height: 63rpx;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      p {
        display: flex;
        font-size: 18rpx;
        color: #fff;
        line-height: 63rpx;
        padding-left: 24rpx;
        .name {
          max-width: 55rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }
      }
    }
    .flower-count {
      width: 192rpx;
      height: 38rpx;
      background-color: rgba(255, 255, 255, 0.5);
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      padding-left: 12rpx;
      margin-top: 10rpx;
      i {
        display: block;
        width: 50rpx;
        height: 30rpx;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
      }
      span {
        font-size: 28rpx;
        color: #3f2311;
        font-weight: bold;
        padding-left: 10rpx;
      }
    }
    .entrance {
      display: flex;
      margin-top: 10rpx;
      &-item {
        margin-right: 6rpx;
        i {
          width: 96rpx;
          height: 77rpx;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
        }
        div {
          font-size: 17rpx;
          font-weight: bold;
          color: #3f2311;
          text-align: center;
          padding-top: 4rpx;
        }
      }
    }
  }
  .shop-operate {
    z-index: 8;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -585rpx;
    display: flex;
    border-top-left-radius: 18rpx;
    border-bottom-left-radius: 18rpx;
    background-color: rgba(0, 0, 0, 0.6);
    .like {
      padding: 10rpx 0;
      width: 97rpx;
      .icon-like {
        display: block;
        width: 57rpx;
        height: 49rpx;
        background: url("../../../static/images/index/shop-like.png") no-repeat center center;
        background-size: 40rpx 34rpx;
        margin: 0 auto;
        &.active {
          background-image: url("../../../static/images/index/shop-like-c.png");
        }
      }
      span {
        display: block;
        color: #fff2c8;
        font-size: 15rpx;
        padding-top: 6rpx;
        text-align: center;
      }
    }
    .share {
      padding: 10rpx 0;
      width: 97rpx;
      button {
        padding: 0;
        line-height: 1.0;
        background-color: transparent;
        &::after {
          display: none;
        }
      }
      i {
        display: block;
        width: 51rpx;
        height: 49rpx;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        margin: 0 auto;
      }
      span {
        display: block;
        color: #fff2c8;
        font-size: 15rpx;
        padding-top: 6rpx;
        text-align: center;
      }
      @keyframes loading {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      .act {
        display: block;
        width: 78rpx;
        height: 78rpx;
        background: url("../../../static/images/index/quan1.png") no-repeat center center;
        background-size: contain;
        animation: loading 1s linear infinite;
        position: absolute;
        top: -3rpx;
        left: 106rpx;
      }
    }
  }
  .music-operate {
    z-index: 8;
    position: absolute;
    right: 25rpx;
    top: 50%;
    margin-top: -491rpx;
    .icon-music {
      display: block;
      width: 66rpx;
      height: 66rpx;
      background: url("../../../static/images/index/music.png") no-repeat center center;
      background-size: contain;
      margin: 0 auto;
      &.active {
        background-image: url("../../../static/images/index/music-c.png");
      }
    }
  }
  .help {
    z-index: 8;
    position: absolute;
    right: 25rpx;
    top: 50%;
    margin-top: -404rpx;
    text-align: center;
    .icon-help {
      display: block;
      width: 66rpx;
      height: 66rpx;
      background: url("../../../static/images/index/help-c.png") no-repeat center center;
      background-size: contain;
      margin: 0 auto;
    }
    span {
      display: block;
      font-size: 17rpx;
      color: #260000;
      padding-top: 6rpx;
      line-height: 1.0;
    }
  }
  .menu {
    z-index: 8;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: 475rpx;
    width: 100%;
    &-container {
      display: flex;
      justify-content: center;
    }
    &-item {
      margin-left: 17rpx;
      margin-right: 17rpx;
      i {
        display: block;
        width: 88rpx;
        height: 88rpx;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        margin: 0 auto;
      }
      span {
        display: block;
        text-align: center;
        font-size: 17rpx;
        color: #eedfd1;
        padding-top: 4rpx;
      }
    }
  }
  .monkey {
    z-index: 8;
    position: absolute;
    top: 50%;
    left: 10rpx;
    margin-top: 20rpx;
    animation: jumping 1s linear 2;
    @keyframes jumping {
      0% {
        transform: translate3d(0, 0, 0);
      }
      25% {
        transform: translate3d(0, 1%, 0);
      }
      50% {
        transform: translate3d(0, 0, 0);
      }
      75% {
        transform: translate3d(0, -1%, 0);
      }
      100% {
        transform: translate3d(0, 0, 0);
      }
    }
    &-text {
      width: 225rpx * 0.75;
      height: 189rpx * 0.75;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
    }
    &-image {
      width: 225rpx * 0.75;
      height: 317rpx * 0.75;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
    }
    button {
      background-color: transparent;
      &::after {
        display: none;
      }
    }
    .no-text {
      margin-top: 189rpx;
    }
  }
  .customer {
    z-index: 8;
    position: absolute;
    top: 50%;
    left: 300rpx;
    margin-top: -120rpx;
    animation: customerAct 16s linear infinite;
    @keyframes customerAct {
      0% {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
      }
      6.25% { // 1/16 1s进来
        opacity: 1;
        transform: none;
      }
      68.75% { // 11/16 10s停留
        opacity: 1;
        transform: none;
      }
      75% { // 12/16 1s开始离开
        opacity: 0;
        transform: translate3d(100%, 0, 0);
      }
      81.25% { // 13/16 1s离开
        opacity: 0;
      }
      100% { // 16/16 3s间隔
        opacity: 0;
      }
    }
    img {
      display: block;
      width: 150rpx;
    }
    &-flower {
      display: flex;
      align-items: baseline;
      justify-content: center;
      margin: 0 auto 23rpx;
      height: 37rpx;
      animation: customerFlowerAct 1.5s linear 1;
      @keyframes customerFlowerAct {
        0% {
          opacity: 0;
        }
        30% {
          opacity: 1;
        }
        70% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      i {
        display: block;
        width: 30rpx;
        height: 37rpx;
        background: url("../../../static/images/index/customer-flower.png") no-repeat center center;
        background-size: contain;
      }
      span {
        color: #e24040;
        font-size: 28.5rpx;
        font-weight: bold;
      }
    }
  }
  .decorate {
    z-index: 10;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: 236rpx;
    display: flex;
    width: 100%;
    height: 353rpx;
    background-color: #fff;
    &-menu {
      div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60rpx;
        height: 115rpx;
        background-color: #d6d3cb;
        &:not(:last-child) {
          margin-bottom: 4rpx;
        }
        i {
          display: block;
          width: 45rpx;
          height: 45rpx;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
        }
      }
    }
    &-detail {
      width: 100%;
      height: 100%;
      &-item {
        position: relative;
        img {
          display: block;
          margin: 0 auto;
        }
        .item-box {
          position: absolute;
          display: flex;
          flex-wrap: wrap;
        }
        &.item1 {
          img {
            width: 591rpx;
            height: 313rpx;
            margin-top: 20rpx;
          }
          .item-box {
            top: -2rpx;
            left: 50rpx;
            width: 591rpx;
            height: 313rpx;
            & > div {
              width: 93rpx;
              height: 144rpx;
              margin-right: 32rpx;
              margin-top: 25rpx;
              background-repeat: no-repeat;
              background-size: contain;
              background-position: center center;
              &:nth-child(5n) {
                margin-right: 0;
              }
              &:nth-child(1) {
                background-image: url("../../../static/images/decorate/r1.png");
              }
              &:nth-child(2) {
                background-image: url("../../../static/images/decorate/r2.png");
              }
              &:nth-child(3) {
                background-image: url("../../../static/images/decorate/r3.png");
              }
              &:nth-child(4) {
                background-image: url("../../../static/images/decorate/r4.png");
              }
              &:nth-child(5) {
                background-image: url("../../../static/images/decorate/r5.png");
              }
              &:nth-child(6) {
                background-image: url("../../../static/images/decorate/r6.png");
              }
              &:nth-child(7) {
                background-image: url("../../../static/images/decorate/r7.png");
              }
              &:nth-child(8) {
                background-image: url("../../../static/images/decorate/r8.png");
              }
              &:nth-child(9) {
                background-image: url("../../../static/images/decorate/r9.png");
              }
              &:nth-child(10) {
                background-image: url("../../../static/images/decorate/r10.png");
              }
            }
          }
        }
        &.item2 {
          img {
            width: 664rpx;
            height: 319rpx;
            margin-top: 17rpx;
          }
          .item-box {
            top: 2rpx;
            left: 15rpx;
            width: 664rpx;
            height: 319rpx;
            & > div {
              width: 150rpx;
              height: 150rpx;
              margin-right: 20rpx;
              margin-top: 19rpx;
              background-repeat: no-repeat;
              background-size: contain;
              background-position: center center;
              &:nth-child(4n) {
                margin-right: 0;
              }
              &:nth-child(1) {
                background-image: url("../../../static/images/decorate/d1.png");
              }
              &:nth-child(2) {
                background-image: url("../../../static/images/decorate/d2.png");
              }
              &:nth-child(3) {
                background-image: url("../../../static/images/decorate/d3.png");
              }
              &:nth-child(4) {
                background-image: url("../../../static/images/decorate/d4.png");
              }
              &:nth-child(5) {
                background-image: url("../../../static/images/decorate/d5.png");
              }
            }
          }
        }
        &.item3 {
          img {
            width: 664rpx;
            height: 318rpx;
            margin-top: 17rpx;
          }
          .item-box {
            top: 2rpx;
            left: 15rpx;
            width: 664rpx;
            height: 319rpx;
            & > div {
              width: 150rpx;
              height: 150rpx;
              margin-right: 20rpx;
              margin-top: 19rpx;
              background-repeat: no-repeat;
              background-size: contain;
              background-position: center center;
              &:nth-child(4n) {
                margin-right: 0;
              }
              &:nth-child(1) {
                background-image: url("../../../static/images/decorate/s1.png");
              }
              &:nth-child(2) {
                background-image: url("../../../static/images/decorate/s2.png");
              }
              &:nth-child(3) {
                background-image: url("../../../static/images/decorate/s3.png");
              }
              &:nth-child(4) {
                background-image: url("../../../static/images/decorate/s4.png");
                &.empty {
                  background-image: url("../../../static/images/decorate/s4-d.png");
                }
              }
              &:nth-child(5) {
                background-image: url("../../../static/images/decorate/s5.png");
                &.empty {
                  background-image: url("../../../static/images/decorate/s5-d.png");
                }
              }
              &:nth-child(6) {
                background-image: url("../../../static/images/decorate/s6.png");
                &.empty {
                  background-image: url("../../../static/images/decorate/s6-d.png");
                }
              }
            }
          }
        }
      }
    }
    &-close {
      position: absolute;
      top: -84rpx;
      right: 12rpx;
      width: 95rpx;
      height: 96rpx;
      color: #e24040;
      font-size: 23rpx;
      text-align: center;
      line-height: 96rpx;
      background: url("../../../static/images/index/dec-btn.png") no-repeat center center;
      background-size: contain;
    }
  }
  .draw-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    min-height: 100vh;
    .draw-item, .draw-item-fixed {
      position: relative;
      width: auto;
      height: auto;
      img {
        display: block;
        width: 150rpx;
        border: 3rpx dashed rgba(255, 255, 255, 0);
        &.focus {
          border: 3rpx dashed #bf5422;
        }
      }
      .draw-close {
        position: absolute;
        top: -24rpx;
        right: -24rpx;
        width: 48rpx;
        height: 48rpx;
        background: url("../../../static/images/index/draw-close.png") no-repeat center center;
        background-size: contain;
      }
    }
  }
  .words {
    &-show {
      z-index: 12;
      position: absolute;
      width: 200%;
      top: 30%;
      left: -100%;
      &-item {
        display: inline-block;
        height: 40rpx;
        padding: 10rpx 0;
        margin-top: 5rpx;
        background-color: rgba(0, 0, 0, 0.63);
        border-radius: 30rpx 30rpx;
        margin-right: 50rpx;
        .item-inner {
          display: flex;
        }
      }
      img {
        display: block;
        width: 40rpx;
        height: 40rpx;
        border-radius: 50% 50%;
        margin-left: 10rpx;
      }
      p {
        flex: 1;
        font-size: 24rpx;
        color: #fff;
        padding-left: 10rpx;
        padding-right: 25rpx;
        line-height: 40rpx;
      }
      @keyframes kf-marque-animation {
        0% { transform: translateX(100%); }
        100% { transform: translateX(-100%); }
      }
      animation: kf-marque-animation 12s linear 1;
    }
    &-section {
      z-index: 12;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.97);
      border-top-left-radius: 14rpx;
      border-top-right-radius: 14rpx;
      &-title {
        display: flex;
        justify-content: space-between;
        padding: 20rpx 45rpx;
        .left {
          display: flex;
          align-items: center;
        }
        .count {
          display: inline-block;
          font-size: 26rpx;
          color: #fff;
          padding-right: 70rpx;
        }
        .btn {
          display: inline-block;
          color: #059f2e;
          font-size: 23rpx;
          border: 1rpx solid #059f2e;
          padding: 0 10rpx;
          line-height: 34rpx;
          border-radius: 17rpx;
        }
        .right {
          display: flex;
          align-items: center;
        }
        .toggle {
          width: 62rpx;
          height: 33rpx;
          background-image: url("../../../static/images/index/toggle-off.png");
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: contain;
          &.toggle-on {
            background-image: url("../../../static/images/index/toggle-on.png");
          }
        }
        .close {
          width: 38rpx;
          height: 40rpx;
          background: url("../../../static/images/index/close.png") no-repeat center center;
          background-size: 19rpx 20rpx;
          margin-left: 43rpx;
        }
      }
      &-list {
        padding: 10rpx 0 20rpx;
        height: 420rpx;
        overflow: scroll;
      }
    }
    &-input {
      z-index: 12;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #fff;
      border-bottom-left-radius: 14rpx;
      border-bottom-right-radius: 14rpx;
      .input-area {
        padding: 20rpx 30rpx;
        textarea {
          width: calc(100% - 30rpx);
          height: 150rpx;
          border: 1rpx solid #eee;
          padding: 15rpx;
          font-size: 32rpx;
          line-height: 42rpx;
        }
      }
      .btn {
        &-inner {
          float: right;
          display: flex;
          padding-bottom: 30rpx;
          padding-right: 30rpx;
        }
        .cancel-btn, .send-btn {
          padding: 0 30rpx;
          width: 70rpx;
          height: 50rpx;
          text-align: center;
          font-size: 30rpx;
          line-height: 50rpx;
          border-radius: 25rpx;
        }
        .cancel-btn {
          color: #ccc;
          border: 2rpx solid #bbb;
        }
        .send-btn {
          color: #fff;
          background-color: #188d37;
          border: 2rpx solid #188d37;
          margin-left: 30rpx;
        }
      }
    }
  }
}
</style>
